<template>
	<view class="content">
		<view class="top">
			<div class="user">
				<button class="btn-avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="user-avatar" :src="avatarUrl"></image>
				</button>
				<view class="username">{{ realName }}</view>
			</div>
			<div class="action">
				<uni-icons type="bars" size="30" color="#fff" @click="onClickMoreAction()"></uni-icons>
			</div>
		</view>
		<view class="container">
			<view class="search">
				<uni-search-bar placeholder="请输入站点名称搜索" bgColor="#fff" cancelButton="none" @confirm="onConfirm" @cancel="onConfirm"></uni-search-bar>
			</view>
			<view class="list">
				<template v-if="deviceList.length > 0">
					<Item v-for="device in deviceList" :key="device.id" :device="device" />
				</template>
				<template v-else>
					<view class="empty">站点为空</view>
				</template>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<view class="close">
					<uni-icons type="closeempty" size="20" color="#fff" @click="onClosePopup()"></uni-icons>
				</view>
				<view class="logout-top">
					<image class="time-icon" src="https://snpl.scgjcx.com/static/quit.png"></image>
					<text>退出登陆</text>
				</view>
				<view class="form">
					<view class="form-tip">退出登陆后，再次登陆需要重新输入用户名和密码!</view>
					<button class="logout" @click="onLogout()">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { request } from '@/util/request.js';
	import Item from './item.vue';
	export default {
		components: { Item },
		data() {
			return {
				realName: '',
				deviceList: [],
				avatarUrl: 'https://snpl.scgjcx.com/static/avatar.jpeg',
				search: '',
				timer: null
			}
		},
		onLoad() {
			
		},
		onShow() {
			const token = uni.getStorageSync('token');
			if (!token) {
				uni.redirectTo({
					url: '/pages/login/index'
				});
				return;
			}
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.realName = res.data.name;
					if (res.data.avatar) {
						this.avatarUrl = res.data.avatar;
					}
				}
			});
			this.loadDeviceList();
			// if (this.timer === null) {
			// 	this.timer = setInterval(() => this.loadDeviceList(), 2000);
			// }
			console.log('index onshow   ');
		},
		onHide() {
			if (this.timer !== null) {
				clearInterval(this.timer);
				this.timer = null;
			}
			console.log('index onHide');
		},
		onUnload() {
			if (this.timer !== null) {
				clearInterval(this.timer);
				this.timer = null;
			}
			console.log('index onUnload');
		},
		methods: {
			onChooseAvatar(event) {
				const userData = uni.getStorageSync('userData');
				const avatarUrl = event.detail.avatarUrl;
				this.avatarUrl = avatarUrl;
				request({
					path: '/user/avatar',
					method: 'post',
					data: { userId: userData.id, avatar: avatarUrl },
					success: ({ data }) => {
						if (data.code === 0) {
							userData.avatar = avatarUrl;
							uni.setStorageSync('userData', userData);
						}
					}
				})
			},
			onClickMoreAction() {
				this.$refs.popup.open('center');
				console.log('onClickMoreAction')
			},
			onClosePopup() {
				this.$refs.popup.close();
			},
			onLogout() {
				uni.showToast({
					icon:'loading',
					title: '退出登录中...',
					success: function() {
						uni.clearStorageSync();
						uni.redirectTo({
							url: '/pages/login/index'
						});
					}
				});
			},
			loadDeviceList() {
				request({
					path: '/station/page',
					method: 'post',
					data: { name: this.search, pageNo: 1, pageSize: 10000 },
					success: ({ data }) => {
						if (data.code === 0) {
							//this.deviceList = data.data.data;
							console.log(this.deviceList);
							let deviceList = data.data.data;
							request({
								path: '/channel/page',
								method: 'post',
								data: { pageNo: 1, pageSize: 10000 },
								success: ({ data }) => {
									if (data.code === 0) {
										const channelList = data.data.data;
										deviceList = deviceList.map(device => {
											const workingStatus = channelList.some(it => it.station === device.id && it.workingStatus === true);
											console.log(device, channelList, workingStatus, 'device');
											return { ...device, workingStatus };
										});
										this.deviceList = deviceList;
									}
									console.log("获取站点下所有线路信息",data);
								}
							});
							
						}
						console.log(data);
					}
				});
			},
			onConfirm(res) {
				this.search = res.value;
				this.loadDeviceList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		display: flex;
		flex-direction: column;
		height: 100vh;
		width: 100vw;
		overflow: hidden;
		
		.top {
			width: 100%;
			height: 145px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20px;
			background-image: url('https://snpl.scgjcx.com/static/bg1.png');
			// background-color: rgba(100, 177, 125, 1);
			
			.user {
				display: flex;
				align-items: center;
				
				.btn-avatar {
					padding: 0;
					display: block;
					width: 65px;
					height: 65px;
					border-radius: 50%;
					margin-right: 10px;
					background-color: transparent;
					border: none;
				}
				
				.user-avatar {
					width: 65px;
					height: 65px;
					border-radius: 50%;
					// 
					display: block;
				}
				.username {
					color: #fff;
				}
			}
			
		}
		
		.container {
			width: 100%;
			flex: 1;
			box-sizing: border-box;
			padding-bottom: 20px;
			background-color: rgb(235, 235, 235);
			position: relative;
			
			.search {
				width: 100%;
				position: absolute;
				top: -30px;
				z-index: 10;
			}
			
			.list {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 30px 10px 10px;
				overflow: auto;
			}
			
			.empty {
				height: 200px;
				line-height: 200px;
				text-align: center;
				color: darkgrey;
				background-color: #fff;
				border-radius: 10px;
			}
			
		}
		
		
		.popup-content {
			width: 75vw;
			border-radius: 15px;
			background-color: #fff;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			
			.close {
				text-align: right;
				position: absolute;
				top: 5px;
				right: 10px;
				color: #fff;
			}
			
			.logout-top {
				height: 80px;
				box-sizing: border-box;
				background-color: rgb(75, 102, 207);
				background-image: url('https://snpl.scgjcx.com/static/cloud.png');
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				
				.time-icon {
					width: 50px;
					height: 50px;
					position: absolute;
					left: 20px;
				}
			}
			
			.form {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 20px 20px 30px;
				background-color: #fff;
				
				.form-tip {
					box-sizing: border-box;
					padding: 20px 15px 40px;
					color: rgb(186, 186, 186);
				}
				
				.logout {
					background-color: rgb(74, 100, 205);
					border-radius: 20px;
					color: #fff;
				}
			}
		}
		
	}
</style>
